<template>
  <view class="goods-list">
    <!-- 搜索框开始 -->
    <YgSearch></YgSearch>
    <!-- 搜索框结束 -->

    <!-- tab栏 开始 -->
    <u-tabs
      :list="list"
      :is-scroll="false"
      :current="current"
      @change="change"
      active-color="#E03440"
    ></u-tabs>
    <!-- tab栏 结束 -->

    <!-- 内容 开始 -->
    <view class="goods-content" v-if="current === 0">
      <navigator
        class="goods-item u-flex u-margin-bottom-10"
        v-for="item in goods"
        :key="item.goods_id"
        :url="'/pages/goods_detail/goods_detail?id=' + item.goods_id"
      >
        <!-- 左侧图片 -->
        <view class="goods-img u-flex-1">
          <u-image
            width="80%"
            :src="item.goods_small_logo"
            mode="widthFix"
          ></u-image>
        </view>

        <!-- 右侧信息 -->
        <view class="goods-info u-flex-2">
          <!-- 信息 -->
          <view class="good-name u-line-2">{{ item.goods_name }}</view>
          <!-- 价格 -->
          <view class="goods-price">￥{{ item.goods_price }}</view>
        </view>
      </navigator>
    </view>
    <!-- 内容 结束 -->

    <!-- 销量内容 开始-->
    <view class="goods-content" v-else-if="current === 1">销量内容</view>
    <!-- 销量内容 结束-->

    <!-- 价格内容 开始 -->
    <view class="goods-content" v-else-if="current === 2">价格内容</view>
    <!-- 价格内容 结束 -->
  </view>
</template>

<script>
// 全局变量 请求参数
const params = {
  // 关键字
  query: "",
  // 分类id
  cid: "",
  // 页码
  pagenum: 1,
  // 页容量
  pagesize: 10,
};

// 全局变量 总页数
let totalPages = 1;
export default {
  data() {
    return {
      // 商品数组
      goods: [],
      list: [
        {
          name: "综合",
        },
        {
          name: "销量",
        },
        {
          name: "价格",
        },
      ],
      current: 0,
    };
  },
  async onLoad(opiton) {
    //const id = 187;
    const { id } = opiton;
    params.cid = id;
    this.getGoods();
  },
  methods: {
    change(index) {
      this.current = index;
    },
    // 封装请求获取
    async getGoods(callback) {
      const res = await this.$u.get("/goods/search", params);
      // 分页数组叠加（新旧数组拼接在一起）
      this.goods = [...this.goods, ...res.message.goods];
      //   获取总页数
      totalPages = Math.ceil(res.message.total / params.pagesize);

      callback && callback();
    },
  },

  //   滚动触底
  onReachBottom() {
    //console.log(totalPages);
    //console.log(params.pagesize);
    //判断有没有下一页数据
    if (params.pagenum >= totalPages) {
      // 没有下一页
      uni.showToast({
        title: "没有更多数据了",
        icon: "none",
      });
    } else {
      // 有下一页
      params.pagenum++;
      this.getGoods();
    }
  },

  // 下拉刷新事件  页面配置中添加一个设置
  onPullDownRefresh() {
    // 空数组
    this.goods = [];
    // 重置页码
    params.pagenum = 1;
    // 重新发请求
    this.getGoods(function() {
      uni.stopPullDownRefresh();
    });
  },
};
</script>

<style lang="scss">
.goods-item {
  // 设置子项拉伸到父项的高度
  align-items: stretch;

  border-bottom: 1rpx solid #eee;
}
.goods-info {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  .goods-price {
    color: #e03440;
  }
}
</style>
